import { WidgetLayout } from '@indexea/sdk/layout';
import { SearchContext } from '@indexea/sdk/context';
import { useIndexeaSearch } from '../hooks';
import Input from './input';
import Hotwords from './hotwords';
import Queries from './queries';
import Aggregations from './aggregations';
import Results from './results';

export type RenderProps = {
  // context: SearchContext
  // results: any
  // search: (q: string) => void
}

export default function () {
  const { layout, context, results } = useIndexeaSearch();

  const rows: Element[] = Array.from(layout.data.rows());

  return (
    <div className="container-fluid p-3">
      {rows.map((row: any, rindex: number) => (
        <div className="row" key={rindex}>
          {Array.from(row.getElementsByTagName('col')).map(
            (col: any, cindex: number) => (
              <div
                className={'col-sm-' + col.getAttribute('width')}
                key={cindex}
              >
                {Array.from(col.getElementsByTagName('control')).map(
                  (ctrl: any, aindex: number) => (
                    <div className="control" key={aindex}>
                      {ctrl.getAttribute('type') === 'input' && (
                        <Input showLogo={true}/>
                      )}
                      {ctrl.getAttribute('type') === 'hotwords' && (
                        <Hotwords/>
                      )}
                      {ctrl.getAttribute('type') === 'indices' && (
                        <Queries/>
                      )}
                      {ctrl.getAttribute('type') === 'aggregation' && (
                        <Aggregations />
                      )}
                      {ctrl.getAttribute('type') === 'results' && (
                        <Results />
                      )}
                    </div>
                  ),
                )}
              </div>
            ),
          )}
        </div>
      ))}
    </div>
  );
}
